<script setup>
import { toRefs, onMounted, ref } from "vue";
import { hideLabel, updateLabel } from "./assets/js/threeObj.js";
import { getDate } from "./utils/index.js";

import useCounterStore from "./stores/counter.js";
const store = useCounterStore();

const data = reactive({
  time: {},
  source: null,
});
const { time, source } = toRefs(data);

onMounted(() => {
  time.value = getDate();
  setInterval(function () {
    time.value = getDate();
  }, 1000);
  setTimeout(function () {
    longLink();
  }, 1000);
});
function longLink() {
  if (window.EventSource) {
    source.value = new EventSource("http://82.156.13.135:8080/recent");

    source.value.onopen = function (event) {};
    source.value.addEventListener(
      "message",
      (event) => {
        let data = eval("(" + event.data + ")");
        if (data.length > 0) {
          hideLabel();
          data.map((item) => {
            if (item.length > 0) {
              item.map((child) => {
                updateLabel(child);
              });
            }
          });
          // Jane
          store.realList = data && data.length > 0 ? data : [];
        }
      },
      false
    );

    // Jane
    source.value.addEventListener(
      "alarm",
      (event) => {
        let data = eval("(" + event.data + ")");
        store.alarmList = data && data.length > 0 ? data : [];
      },
      false
    );

    source.value.onerror = function (event) {
      source.value.close();
      longLink();
    };
  }
}
</script>

<template>
  <div class="app">
    <div class="in">
      <div class="title">
        <img src="./assets/img/top.png" alt="" />
        <div class="bottom">
          <div class="left">
            <router-link to="/realtime"><p>实时数据</p></router-link>
            <router-link to="/history"><p>历史数据</p></router-link>
          </div>
          <div class="right">
            {{
              time.time ? time.time : ""
            }}&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;{{
              time.date ? time.date : "-"
            }}&nbsp;&nbsp;&nbsp;{{ time.week ? time.week : "-" }}
          </div>
        </div>
      </div>
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;
  background-color: #051b42;
  font-size: 0.8vw;
}
.app .in {
  margin: 0 auto;
  height: 100%;
  background: url("./assets/img/bg.png") center center no-repeat;
  background-size: cover;
}
.title {
  height: 9vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.title img {
  width: 100%;
}
.title .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: 5vh;
  align-items: center;
  justify-content: space-between;
}
.title .bottom .left {
  display: flex;
  margin-left: 42%;
}
.title .bottom .right {
  color: #fff;
  padding-right: 7%;
  padding-bottom: 1vh;
}
.title .bottom .right span {
  opacity: 0.6;
}
.title .bottom .left p {
  width: 100px;
  padding: 6px 0;
  text-align: center;
  color: #aaa;
  background: url("./assets/img/title.png") center center no-repeat;
  background-size: 100px 34px;
}
.title .bottom .left .active p {
  color: #fff;
  background: url("./assets/img/title_active.png") center center no-repeat;
  background-size: 100px 34px;
}
.content {
  height: calc(100vh - 9vh);
  padding: 0.2vw 0.8vw 0.8vw 0.8vw;
}
</style>
<style lang="scss">
.el-table th.el-table__cell {
  background-color: #072b87;
}
.el-table thead {
  color: #48ece7;
}
.el-table {
  background-color: transparent;
}
.el-table__inner-wrapper::before {
  background-color: transparent;
}
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
.el-table__empty-text {
  color: #587db3;
}
.el-table tr {
  background: transparent;
}
.el-table tr:hover td {
  background: rgba(13, 27, 64, 0.5) !important;
}
.el-table tbody tr:nth-child(odd) td {
  background: #081d47;
  color: #fff;
}
.el-table tbody tr:nth-child(even) td {
  background: #15274f;
  color: #fff;
}
.el-table td.el-table__cell {
  border-bottom: none;
}

/* form */
.el-input__wrapper,
.el-input__wrapper:hover,
.el-date-editor.el-input__wrapper {
  background-color: transparent;
  box-shadow: 0 0 0 0.06vw #409eff inset;
}
.el-select__tags .el-tag {
  background: url("./assets/img/menu_default.png") center center no-repeat;
  background-size: 100% 100%;
}
.el-select__tags-text {
  color: #fff;
  font-size: 0.8vw;
}
.el-tag .el-tag__close {
  color: #fff;
}
.el-input__inner,
.el-date-editor .el-range-input {
  color: #fff;
}
.el-date-picker__editor-wrap .el-input__inner {
  color: #555;
}
.el-date-editor .el-range-separator {
  color: #fff;
}
.el-picker-panel__body .el-input__inner {
  color: #555;
}
.el-loading-mask {
  background-color: transparent;
}
.el-select__tags {
  overflow: auto;
  .el-select-tags-wrapper.has-prefix {
    display: flex;
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

/* 分页 */
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background: transparent;
  border: 0.06vw solid #1870a0;
  border-radius: 0.2vw;
  color: #bdbdbd;
}
.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
  background: transparent;
  border-color: #13aafc;
}
/* .el-pagination.is-background .btn-next.is-disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.is-disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.is-disabled, .el-pagination.is-background .el-pager li:disabled{
    background: transparent;
    color: #bdbdbd;
    border: none;
  }
  .btn-next.is-last{
    border: none!important;
  } */
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled {
  background: transparent;
  color: #bdbdbd;
  border: none;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  color: #13aafc;
  border: none;
  text-decoration: underline;
  text-underline-offset: 0.018vw;
}

// 下拉
.el-select__wrapper {
  background-color: transparent;
  box-shadow: 0 0 0 0.03vw #409eff inset;
}
.el-select__placeholder {
  color: #fff;
}
.el-tag.el-tag--info {
  --el-tag-bg-color: #11479b;
}
::-webkit-scrollbar {
  display: none;
}
</style>
